<template>
  <el-container>
    <el-header height="auto">
      <label class="title">搜索机框</label>
      <el-row>
        <el-col :span="5">
          <my-input ref="nameInput" prefixDesc="名称" @change="getEnclosureName"/>
        </el-col>
        <el-col :span="5">
          <my-input ref="usernameInput" prefixDesc="使用者" @change="getUserName"/>
        </el-col>
        <el-col :span="5">
          <my-select ref="statusSelect" prefixDesc="状态" :dataSource="constant.ENCLOSURE_STATUS_LIST"
                     @select="getSelectStatus" @clear="clearStatus"/>
        </el-col>
        <el-col :span="5">
          <my-select ref="securitySelect" prefixDesc="安全柜" :dataSource="constant.IS_SECURITY_LIST"
                     @select="getSelectIsSecurity" @clear="clearSecurity"/>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">
          <my-select-brand ref="brandSelect" deviceType="enclosure" @select="getSelectBrand"/>
        </el-col>
        <el-col :span="5">
          <my-select-model ref="modelSelect" :brandId="search.brandid" deviceType="enclosure"
                           @select="getSelectModel"/>
        </el-col>
        <el-col :span="5">
          <my-input ref="serialNumberInput" prefixDesc="序列号" @change="getSerialNumber"/>
        </el-col>
        <el-col :span="5">
          <my-input ref="propertyFlagInput" prefixDesc="资产标签" @change="getPropertyFlag"/>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">
          <my-select-datacenter ref="dataCenterSelect" @select="getSelectDataCenter"/>
        </el-col>
        <el-col :span="5">
          <my-select-module ref="moduleSelect" :dataCenterId="search.datacenterid" @select="getSelectModule"/>
        </el-col>
        <el-col :span="5">
          <my-select-rack ref="rackSelect" :moduleId="search.idcmoduleid" @select="getSelectRack"/>
        </el-col>
        <el-col :span="5">
          <my-select-deviceheight ref="heightSelect" deviceType="enclosure" @select="getSelectHeight"/>
        </el-col>
        <el-col :span="4" class="el-col-left">
          <el-button type="primary" size="mini" @click="loadRackList(1, null)">搜索</el-button>
          <el-button type="info" size="mini" @click="resetSearch">重置</el-button>
        </el-col>
      </el-row>
    </el-header>
    <el-main v-loading="loading">
      <label class="title">机框列表</label>
      <el-table :data="enclosureList" size="mini" stripe>
        <el-table-column prop="rackname" label="名称" align="center"></el-table-column>
        <el-table-column prop="users" label="使用者" align="center"></el-table-column>
        <el-table-column prop="aampere" label="额定电力" align="center"></el-table-column>
        <el-table-column prop="usedflagName" label="状态" align="center"></el-table-column>
        <el-table-column label="安全柜" align="center">
          <template slot-scope="scope">{{ scope.row.issecurity | isSecurity }}</template>
        </el-table-column>
        <el-table-column prop="datacentername" label="数据中心" align="center"></el-table-column>
        <el-table-column prop="idcmodulename" label="机房模块" align="center"></el-table-column>
        <el-table-column prop="uNumbers" label="机柜U数" align="center"></el-table-column>
      </el-table>
    </el-main>
    <el-footer height="40px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPageNum"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"/>
    </el-footer>
  </el-container>
</template>

<script>
  import MyInput from '../../../../common/components/MyInput';
  import MySelect from '../../../../common/components/MySelect';
  import MySelectBrand from '../../../../common/components/MySelectBrand';
  import MySelectModel from '../../../../common/components/MySelectModel';
  import MySelectModule from '../../../../common/components/MySelectModule';
  import MySelectDataCenter from '../../../../common/components/MySelectDataCenter';
  import MySelectRack from '../../../../common/components/MySelectRack';
  import MySelectDeviceHeight from '../../../../common/components/MySelectDeviceHeight';
  import {getRackList} from '../../../../api/itopApi';
  import {Message} from 'element-ui';

  export default {
    name: 'EnclosureList',
    components: {
      'my-input': MyInput,
      'my-select': MySelect,
      'my-select-brand': MySelectBrand,
      'my-select-model': MySelectModel,
      'my-select-module': MySelectModule,
      'my-select-datacenter': MySelectDataCenter,
      'my-select-rack': MySelectRack,
      'my-select-deviceheight': MySelectDeviceHeight
    },
    data() {
      return {
        loading: false,
        totalCount: 0,
        currentPageNum: 1,
        currentPageSize: 10,
        search: {
          enclosurename: '',
          users: '',
          usedflag: '',
          issecurity: '',
          brandid: '',
          modelid: '',
          serialnumber: '',
          propertytag: '',
          datacenterid: '',
          idcid: '',
          height: '',
          enclosureunitid: '',
          status: '',
          pageNum: 1,
          pageSize: 10
        },
        rackList: []
      };
    },
    methods: {
      getRackName(value) {
        this.search.rackname = value;
      },
      getUserName(value) {
        this.search.users = value;
      },
      getSelectStatus(value) {
        this.search.usedflag = value;
      },
      clearStatus() {
        this.search.usedflag = '';
      },
      getSelectIsSecurity(value) {
        this.search.issecurity = value;
      },
      clearSecurity() {
        this.search.issecurity = '';
      },
      getSelectBrand(item) {
        this.search.brandid = item == null ? '' : item.id;
      },
      getSelectModel(item) {
        this.search.modelid = item.id;
      },
      getSelectDataCenter(item) {
        this.search.datacenterid = item == null ? '' : item.datacenterid;
      },
      getSelectModule(item) {
        this.search.idcmoduleid = item.id;
      },
      loadRackList(pageNum, pageSize) {
        if (pageNum) {
          this.search.pageNum = pageNum;
        }
        if (pageSize) {
          this.search.pageSize = pageSize;
        }
        this.loading = true;
        getRackList(this.search)
          .then(data => {
            this.loading = false;
            this.rackList = data.list;
            this.totalCount = data.total;
            this.currentPageNum = this.search.pageNum;
          })
          .catch(error => {
            this.loading = false;
            Message.error(error.message);
          });
      },
      resetSearch() {
        this.search = {
          rackname: '',
          users: '',
          usedflag: '',
          issecurity: '',
          brandid: '',
          modelid: '',
          startdate: '',
          enddate: '',
          datacenterid: '',
          idcmoduleid: '',
          pageNum: 1,
          pageSize: this.currentPageSize
        };
        this.$refs.nameInput.reset();
        this.$refs.usernameInput.reset();
        this.$refs.statusSelect.reset();
        this.$refs.securitySelect.reset();
        this.$refs.brandSelect.reset();
        this.$refs.modelSelect.reset();
        this.$refs.dataCenterSelect.reset();
        this.$refs.moduleSelect.reset();
        this.loadRackList(1, null);
      },
      handleSizeChange(pageSize) {
        this.currentPageNum = 1;
        this.currentPageSize = pageSize;
        this.loadRackList(1, pageSize);
      },
      handleCurrentChange(pageNum) {
        this.loadRackList(pageNum, null);
      }
    },
    mounted() {
      this.loadRackList();
    }
  };
</script>
<style lang="scss" scoped>
  .el-container {
    text-align: left;
    font-size: 14px;
    .el-header {
      padding: 0 0 20px;
      background-color: #fff;
      & > .el-row {
        margin-top: 16px;
      }
      .el-col {
        text-align: right;
        line-height: 32px;
        &-left {
          text-align: left;
          padding-left: 40px;
        }
        &-center {
          text-align: center;
        }
        .el-date-editor.el-input {
          width: 100%;
        }
      }
    }
    .el-main {
      padding: 0;
      margin-top: 16px;
      background-color: #fff;
    }
    .title {
      display: inline-block;
      width: calc(100% - 20px);
      padding: 10px;
      border-bottom: 1px solid #f2f2f2;
    }
    .el-footer {
      text-align: right;
      padding: 10px 0 0;
    }
  }
</style>

